<!DOCTYPE HTML>

<html>
	<head>
		<title>Elements - Invention</title>

		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="assets/ionicons-2.0.1/css/ionicons.min.css">
		<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/owl.carousel.css">

		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
	</head>

	<body>
		<section class="head">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12">
						<header class="header">
							<div class="inner">
								<a href="#menu" class="nav-bars">
									<img src="assets/images/nav-icon.png" class="img-responsive" alt="Collapsable Navbar">
								</a>
								<a href="index.html" class="logo">
									INVENTI<span><img src="assets/images/logo.png"></span>N
								</a>
							</div>
						</header>

						<!-- Menu -->

						<nav id="menu">
							<h2>Menu</h2>
							<ul>
								<li><a href="index.html">Home</a></li>
								<li><a href="elements.html">Elements</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</section>

		<section id="innerheader2" class="innerheader innerheader2">
			<div class="overlay"></div>
			<div class="container">
				<div class="row pad-small">
					<div class="col-sm-12">
						<div class="inner-title">
							<h3>ELEMENTS</h3>
							<p>PHASELLUS NON PULVINAR ERAT. FUSCE TINCIDUNT NISL EGET IPSUM.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="paragraph">
			<div class="container">
				<h1>Heading 1 With Paragraph</h1>
				<p>Lorem Ipsum available, but the majority have suffered This alteration in some from, by injected is a humour, or randomised words which don't look even sligh is made believable. If to use and yammi passage of Lorem Ipsum, you need to be sure there isn't by pioneer designer anything embarrassing</p>
			</div>				
		</section>

		<section class="blockquote">
			<div class="container">
				<h1>Blockquote</h1>
					<blockquote>Injected humour, or randomised words which don’t look even sligh is made believable If  to use and passage of Lorem Ipsum. Hello Im Secspaire.</blockquote>
			</div>
		</section>

		<section class="unordered-list">
			<div class="container">
				<h1>Unordered List</h1>				
				<div class="row">
					<div class="col-md-7">
						<p>Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer.</p>
					</div>
				</div>	
				 	
				 <ul class="unordarlist">
					<li class="fa fa-square" aria-hidden="true" >
						All the Lorem Ipsum generators on the Internet tend to repeat.
					</li><br>
					<li class="fa fa-square" aria-hidden="true">
						Making this the first true generator on the Internet.
					</li><br>
					<li class="fa fa-square" aria-hidden="true">
						The generated Lorem ipsum doler set emet.
					</li><br>
					<li class="fa fa-square" aria-hidden="true">
						Always free from repetition injected.
					</li>
				</ul>
			</div>								
		</section>

		<section class="ordered-list">
			<div class="container">
				<h1>Ordered List</h1>				
				<div class="row">
					<div class="col-md-7">
						<p>Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer.</p>
					</div>
				</div>					
				<ol class="ordarlist">
					<li>
						All the Lorem Ipsum generators on the Internet tend to repeat.
					</li>
					<li>
						Making this the first true generator on the Internet.
					</li>
					<li>
						The generated Lorem ipsum doler set emet.
					</li>
					<li>
						Always free from repetition injected.
					</li>
				</ol>
			</div>							
		</section>

		<section class="performatted">
			<div class="container">
			<h1>Preformatted</h1>
				<pre><code>i = 0;

while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}

print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
			</div>
		</section>

		<section class="alternate-icon">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-6">
								<div>
									<h1>Alternate</h1>
									<p>All the Lorem Ipsum generators on the Internet tend to repeat.</p><hr>
									<p>Making this the first true generator on the Internet.</p><hr>
									<p>The generated Lorem ipsum doler set emet.</p><hr>
									<p>Always free from repetition injected.</p><hr>
								</div>
							</div>
							<div class="col-md-6">
								<div class="icons">
									<h1>Icons</h1>
									<li class="fa fa-facebook" aria-hidden="true"></li>
									<li class="fa fa-twitter" aria-hidden="true"></li>
									<li class="fa fa-angle-left" aria-hidden="true"></li>
									<li class="fa fa-angle-right" aria-hidden="true"></li>
									<li class="fa fa-expand" aria-hidden="true"></li>
								</div>
							</div>
						</div>
					</div>
				</div>				
			</div>
		</section>

		<section class="table">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h1>Table</h1><br>
						<h4>Default</h4>
						<div class="table-responsive">
							<table class="table table-hover">									
								<thead>
									<tr>
										<th>Name</th>
										<th>Description</th>
										<th>Price</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Item One</td>
										<td>Ante turpis integer aliquet porttitor.</td>
										<td>29.99</td>
									</tr>
									<tr>
										<td>Item Two</td>
										<td>Vis ac commodo adipiscing arcu aliquet.</td>
										<td>19.99</td>
									</tr>
									<tr>
										<td>Item Three</td>
										<td> Morbi faucibus arcu accumsan lorem.</td>
										<td>29.99</td>
									</tr>
									<tr>
										<td>Item Four</td>
										<td>Vitae integer tempus condimentum.</td>
										<td>19.99</td>
									</tr>
									<tr>
										<td>Item Five</td>
										<td>Ante turpis integer aliquet porttitor.</td>
										<td>29.99</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td></td>
										<td></td>
										<td><!-- 100.00 --></td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h1>Alternate</h1><br>
						<h4>Default</h4>
						<div class="table-responsive">
							<table class="table table-bordered">									
								<thead>
									<tr>
										<th>Name</th>
										<th>Description</th>
										<th>Price</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Item One</td>
										<td>Ante turpis integer aliquet porttitor.</td>
										<td>29.99</td>
									</tr>
									<tr>
										<td>Item Two</td>
										<td>Vis ac commodo adipiscing arcu aliquet.</td>
										<td>19.99</td>
									</tr>
									<tr>
										<td>Item Three</td>
										<td> Morbi faucibus arcu accumsan lorem.</td>
										<td>29.99</td>
									</tr>
									<tr>
										<td>Item Four</td>
										<td>Vitae integer tempus condimentum.</td>
										<td>19.99</td>
									</tr>
									<tr>
										<td>Item Five</td>
										<td>Ante turpis integer aliquet porttitor.</td>
										<td>29.99</td>
									</tr>
								</tbody>
								<tfoot>
									<!-- <tr>
										<td></td>
										<td></td>
										<td>100.00</td>
									</tr> -->
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="button">
			<div class="container">
			<h1>Buttons</h1>
				<section>
					<div class="row">
						<div class="col-md-12">
							<div class="row">
								<div class="col-md-4">
									<a href="#" type="button" class="btn btn-tobais btn-defalt hover-off">DEFALT</a>
						  			<a href="#" type="button" class="btn btn-tobais btn-special">SPECIAL <span class="ion-ios-cloud-download" aria-hidden="true"></span></a>
								</div>								
								<div class="col-md-4">
									<a href="#" type="button" class="btn btn-tobais btn-big hover-off">BIG</a>
							 		<a href="#" type="button" class="btn btn-tobais btn-small hover-off">SMALL</a>
								</div>
								<div class="col-md-4">
									<button type="button" class="btn-tobais btn-disabled" disabled>DISABLED</button>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="row">
								<div class="col-md-4">
									<a href="#" type="button" class="btn btn-tobais btn-fit hover-off">FIT</a>
								</div>
								<div class="col-md-4">
									<a href="#" type="button" class="btn btn-tobais btn-fit-small hover-off">FIT+SMALL</a>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</section>

		<section class="contact-form">
			<div class="container">
			<!-- Form -->
				<div class="row">
					<div class="col-md-12">
						<h1>Form</h1>
						<form class="form-name-email">
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<input type="text" class="form-control" name="name" id="name" placeholder="Name"/>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<input type="email" class="form-control" name="email" id="email" placeholder="Email" />
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<form>
										<select class="form-control">
											<option selected="selected">Select Category</option>
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
									</form>
								</div>
							</div>
							
							<div class="row">
								<div class="col-md-12">
									<div class="row">
										<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left">
								    		<label class="radio-inline">
											  	<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Low
											</label>
										</div>
										<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center">
								    		<label class="radio-inline">
											  	<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Normal
											</label>
							   			 </div>
							   			 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
								    		<label class="radio-inline">
											  	<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> High
											</label>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="row">
										<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left">
									  		<label class="checkbox-inline">
											  	<input type="checkbox" id="inlineCheckbox1" value="option1"> Apple
											</label>
										</div>
										<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center">
										   <label class="checkbox-inline">
											  	<input type="checkbox" id="inlineCheckbox2" value="option2"> Mango
											</label>
									    </div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="from-group">
										<textarea class="form-control" rows="10" name="message" id="message" placeholder="Message..."></textarea>
									</div>
									<p>
									  <a href="#" type="button" class="btn btn-tobais btn-send">SEND MESSAGE</a>
									  <a href="#" type="button" class="btn btn-tobais btn-reset">RESET</a>
									</p>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</section>

		<section class ="fit-image">
			<div class="container">
			<h1>Image</h1><br>
				<h4>FIT</h4>
					<div class="row">
					
					<div class="col-md-12">
						<img src="assets/images/fit-image.jpg" class="img-responsive img-fit" alt="Responsive image" />
					</div>
				</div>
			</div>
		</section>

		<section class="grid-image">
			<div class="container">
				<div class="tiles">
					<h5>GRID</h5>
						<div class="row">
							<div class="col-md-4">
								<img src="assets/images/2.jpg" class="img-responsive" alt="Responsive image" />
							</div>
							<div class="col-md-4">
								<img src="assets/images/3.jpg" class="img-responsive" alt="Responsive image"/>
							</div>
							<div class="col-md-4">
								<img src="assets/images/1.jpg" class="img-responsive" alt="Responsive image" />
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">
								<img src="assets/images/5.jpg" class="img-responsive" alt="Responsive image" />
							</div>
							<div class="col-md-4">
								<img src="assets/images/6.jpg" class="img-responsive" alt="Responsive image"/>
							</div>
							<div class="col-md-4">
								<img src="assets/images/4.jpg" class="img-responsive" alt="Responsive image" />
							</div>
						</div>
				</div>
			</div>
		</section>

		<section class="image-text">
			<div class="container">						
				<div class="row">
					<div class="col-md-4">
						<img src="assets/images/4.jpg" class="img-responsive" alt="Responsive image"/>
					</div>
					<div class="col-md-8">
						<p class="image-text-text">Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.<br><br>
						Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.</p>	
					</div>
				</div>												
				<div class="row">
					<div class="col-md-4 col-md-push-8">
						<img src="assets/images/5.jpg" class="img-responsive" alt="Responsive image"/>
					</div>
					<div class="col-md-8 col-md-pull-4">
						<p class="image-text-text second">Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.<br><br>
						Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.</p>	
					</div>
				</div>						
			</div>
		</section>
		<hr>

		<section class="social-section">
			<div class="container-fluid">
				<div class="row">
					<div class="social-contact">
						<div class="col-md-6">
							<div class="row">
								<div class="col-md-4">
									<p class="logo">INVENTI<span><img src="assets/images/logo.png"></span>N</p>
								</div>
								<div class="col-md-8">
									<div class="row">
										<div class="col-md-4">
											<p>SERVICES</p>
											<p><a href="#">Research</a></p>
											<p><a href="#">Mobil</a></p>
											<p><a href="#">Travel</a></p>
										</div>
										<div class="col-md-4">
											<p>USEFULL LINKS</p>
											<p><a href="#">Players</a></p>
											<p><a href="#">Gift</a></p>
											<p><a href="#">Help</a></p>
										</div>
										<div class="col-md-4">
											<p>SERVICES</p>
											<p><a href="#">For Artists</a></p>
											<p><a href="#">Developers</a></p>
											<p><a href="#">Brands</a></p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="row">
								<div class="col-md-6">
								<h5>KEEP ME UP TO DATE</h5>
									<div class="input-group">
								      	<input type="text" class="form-control notify-me" placeholder="">
								      	<span class="input-group-btn">
								        	<a href="#" class="btn btn-default notify-me" type="button">NOTIFY ME</a>
								     	</span>
								    </div>
								</div>
								<div class="col-md-6">
									<ul class="social-icon">
										<li>
											<a href="#" class="ion-social-facebook-outline"></a>
										</li>
										<li>
											<a href="#" class="ion-social-twitter-outline"></a>
										</li>
										<li>
											<a href="#" class="ion-social-dribbble-outline"></a>
										</li>
										<li>
											<a href="#" class="ion-social-pinterest-outline"></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>			
			</div>
		</section>
		<hr>

		<section class="footer">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<ul class="footer-bottom">
							<li><a href="#">Legal</a></li>
							<li><a href="#">Cookies</a></li>
							<li>
								<a href="#">
									<img src="assets/images/add.png">AdCholces
								</a>
							</li>
						</ul>
					</div>
					<div class="col-md-6">
						<p class="copyright-text">Invantion &copy; 2016 
							More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
						</p>
					</div>
				</div>
			</div>
		</section>
		<!-- Scripts -->
		<script src="assets/js/jquery-3.1.0.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.magnific-popup.min.js"></script>
		<script src="assets/js/owl.carousel.min.js"></script>

		<script src="assets/js/script.js"></script>

	</body>
</html>